<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<script src="js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="elmentui/elmentui.css">
		<!-- 引入组件库 -->
		<script src="elmentui/elmentui.js"></script>
		<!-- 引入axios网络传输A库 -->
		<script src="elmentui/axios.min.js"></script>
		<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
		<script src="elmentui/qs.min.js"></script>

	</head>
	<body>
		<div id="app">
			<el-form :model="userBean" status-icon  ref="userBean" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="用户名" prop="username">
			    <el-input type="text" v-model="userBean.username" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="密码" prop="userpwd">
			    <el-input type="password" v-model="userBean.userpwd" autocomplete="off"></el-input>
			  </el-form-item>			  
			  <el-form-item>
			    <el-button type="primary" @click="onsubmit()">提交</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>		
		</div>		
		<script>
			var  app=new Vue({
				el:"#app",
				data:{
					userBean:{
						username:"",
						userpwd:""						
					}
					
				},methods:{
					onsubmit:function(){
						console.log(this.userBean.username)
						console.log(this.userBean.userpwd)
						var ps=Qs.stringify(this.userBean);
						axios.post('http://localhost:8086/nsd_springbootvue1009server/logined', ps)
						  .then(function (response) {
							  console.log(response)
							  if(response.data=="ok"){
								  
								  window.location.href="index.html"
								  
								  
								  
							  }
							  
							  
							  
						   
						  })
						  .catch(function (error) {
						    console.log(error);
						  });
						
						
						
						
					},
					resetForm:function(){
						// this.$refs[formName].resetFields();
					}
					
				}
				
				
				
				
				
			})
			
			
			
			
		</script>
		
		
		
		
		
		
		
		
		
	</body>
</html>
